import {ContentViewNav, ContentViewContent, ContentViewFooter} from './contentView'

/**左侧有头部栏和底部栏 */
export const ViewLeft = defineComponent({
  name: 'ViewLeft',
  setup(props, {slots}) {
    return () => (
      <div class='h-full 2xl:w-mainViewLeft w-48  border-r border-default overflow-hidden'>
        <ContentViewNav>{slots.nav?.()}</ContentViewNav>
        <ContentViewContent>{slots.content?.()}</ContentViewContent>
        <ContentViewFooter>{slots.footer?.()}</ContentViewFooter>
      </div>
    )
  }
})

/**左侧无底部栏 */
export const ViewLeftNotFooter = defineComponent({
  name: 'ViewLeftNotFooter',
  setup(props, {slots}) {
    return () => (
      <div class='h-full 2xl:w-mainViewLeft w-48  border-r border-default overflow-hidden'>
        <ContentViewNav>{slots.nav?.()}</ContentViewNav>
        <ContentViewContent showFooter={false}>{slots.content?.()}</ContentViewContent>
      </div>
    )
  }
})

/**左侧无头部栏 */
export const ViewLeftNotNav = defineComponent({
  name: 'ViewLeftNotNav',
  setup(props, {slots}) {
    return () => (
      <div class='h-full 2xl:w-mainViewLeft w-48  border-b border-r border-default overflow-hidden flex flex-col'>
        <ContentViewContent showNav={false}>{slots.content?.()}</ContentViewContent>
        <ContentViewFooter>{slots.footer?.()}</ContentViewFooter>
      </div>
    )
  }
})

/**左侧无头部栏和底部栏  */
export const ViewLeftNoNavAndFooter = defineComponent({
  name: 'ViewLeftNoNavAndFooter',
  setup(props, {slots}) {
    return () => (
      <div class='h-full 2xl:w-mainViewLeft w-48 border-r border-default overflow-hidden flex flex-col'>
        <ContentViewContent showNav={false} showFooter={false}>
          {slots.content?.()}
        </ContentViewContent>
      </div>
    )
  }
})
